<template>
  <div class="demo">
    <van-cell-group title="复制文本指令">
      <button v-copy="copyText">点击复制文本</button>
    </van-cell-group>
    <van-cell-group title="长按触发事件指令">
      <button v-longpress="longpress">长按2秒</button>
    </van-cell-group>
    <van-cell-group title="防抖指令">
      <button v-debounce="debounceClick">防抖</button>
    </van-cell-group>
    <van-cell-group title="节流指令">
      <button v-throttle="{ fn: throttle, time: 3000 }">节流</button>
    </van-cell-group>
    <van-cell-group title="指令-点击非弹窗区域关闭该弹窗">
      <button @click="isImgShow = true">展示弹窗</button>
      <div v-if="isImgShow" v-click-out="clickImgOut" class="pop">
        <p>点击非弹窗区域关闭该弹窗点击非弹窗区域关闭该弹窗点击非弹窗区域关闭该弹窗点击非弹窗区域关闭该弹窗</p>
      </div>
    </van-cell-group>
    <van-cell-group title="权限指令,无权限不展示">
      <button v-permission="'1'">权限按钮1</button>
      <button v-permission="'10'">权限按钮2</button>
    </van-cell-group>
    <van-cell-group title="自定义加载动画指令">
      <button @click="toLoading()">自定义加载动画指令</button>
    </van-cell-group>
    <van-cell-group title="给指定页面加水印">
      <div v-waterMarker="{ text: 'copyRight', textColor: 'rgba(180, 180, 180, 0.4)' }" class="markarea" />
    </van-cell-group>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      copyText: '这个是我复制的内容',
      isImgShow: false
    };
  },
  created() {},
  methods: {
    longpress() {
      alert('长按指令生效');
    },
    debounceClick() {
      console.log('debounce 防抖 只触发一次');
    },
    throttle() {
      console.log('throttle 节流 只触发一次');
    },
    clickImgOut() {
      this.isImgShow = false;
      console.log('点击弹窗外部');
    },
    toLoading() {
      this.$router.push('/demo/loading');
    }
  }
};
</script>
<style lang="less" scoped>
button {
  margin: 0;
  padding: 10px 0;
  width: 100%;
  border: none;
  font-size: 12px;
  background: #2897ff;
  color: #fff;
}
.el-dialog {
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;
  left: 0;
  top: 0;
}
.markarea {
  width: 100%;
  height: 500px;
}
.pop {
  left: 0;
  top: 0;
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(25, 25, 25, 0.8);
  z-index: 9999;
  font-size: 12px;
  color: #fff;
}
</style>
